﻿@{
    ViewBag.Title = "Azure Blob Upload";
}
<style>
    .bar {
        height: 18px;
        background: green;
    }

    body {
        padding-top: 60px;
    }

    .thumb1 {
        width: 60px;
        height: 40px;
    }

    .progress {
        display: none;
    }

    .thumb2 {
        width: 40px;
    }

    #azureblobs {
        width: 90%;
        border: 1px solid #eee;
        margin: 10px;
    }

    #grid th {
        border: 1px solid #444444;
        padding: 10px;
    }

    #grid td {
        border: 1px solid #888888;
        padding: 10px;
    }

    .grad {
        background: #ffb76b; /* Old browsers */
        background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* IE10+ */
        background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
    }

    .btn {
        cursor: pointer;
       
        height: 40px;
        background-color: #33FF00;
        moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border: 1px solid red;
        border-radius: 3px 3px 3px 3px;
        padding: 5px;
    }
    #btnLoad {
          min-width: 100px;
    }
    .delete-selected {
        cursor: pointer;
         min-width: 75px;
    }
</style>
<div id="body">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h2>List of Tables from Blob Container</h2>
            </hgroup>
        </div>
    </section>
    <section class="content-wrapper main-content clear-fix">
        <table style="width: 100%; border-bottom:2px solid #334455; padding-right:0; margin-right:0;" >
            <tr>
                <td>
                    <img src="~/Content/Document/logo.jpg"  style="width:80px;" />
                </td>
                <td style="width:50%">
                    <h4>AZURE BLOB : Container - [ root ]</h4>
                </td>
                <td>
                    <span id="progress" class="progress">
                        <img src="~/Images/loading.gif" class="thumb2" /></span>
                </td>
                 <td >
                    <button id="btnLoad" value="Load" class="btn grad">Refresh List</button>
                </td>
                <td style="text-align:right;padding-right:0; margin-right:0;">
                    <button id="btnDelete" value="Delete" class="delete-selected btn grad">Delete All</button>
                </td>
            </tr>

        </table>
       
        <div id="azure" style="font-size: small; overflow-x: scroll">
            <table id="azureblobs" style="width: 99%">

                <tbody id="grid">
                    <tr id="tablehead">
                        <th>Blob Name</th>
                        <th>Thumb Nail</th>
                        <th>Blob Uri </th>
                        <th>Select All
                            <br />
                            <input type="checkbox" id="selectall" class="select-all" value="Select All" />

                        </th>
                    </tr>
                </tbody>
            </table>
        </div>
        <hr />
        <div id="cooldebug"></div>
    </section>
</div>
@section scripts
{
    <script src="~/Scripts/json2.js"></script>
    <script src="~/Scripts/jquery.fileupload.js"></script>
    <script src="~/Scripts/jquery.fileupload-ui.js"></script>
    <script src="~/Scripts/jquery.iframe-transport.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script type="text/javascript">
        $(function () {          
            // Load it
            LoadBlobs();
            $("#selectall").change(function () {
                var selected = $(this).attr("checked");
                if (selected) {
                    $(".select-single").attr("checked", selected);
                }
                else {
                    $(".select-single").removeAttr("checked");
                }
            });
            $(".delete-selected").click(function () {
                var items = [];
                $(".select-single").each(function (i, item) {
                    var selected = $(this).attr("checked");
                    if (selected) {
                        items.push($(this).attr("data-url"));
                    }
                });
                var urls = items.join(';');
                try {
                    DeleteBlobs(urls);
                }
                catch (e) {
                }
            });
            $("#btnLoad").click(function () {
                LoadBlobs();
            });
           
        });
        function DeleteBlobs(urls) {
            var args = JSON.stringify({ 'BlobUrls': urls });
            $.ajax({
                type: "POST",
                url: "/api/DeleteBlobs",
                context: document.body,
                data: args,
                dataType: 'json',
                contentType: 'application/json',
                processData: false,
                async: false,
                beforeSend: function () {
                    $(".progress").show();
                }
            }).done(function (data) {
                BindGrid(data);
            })
           .fail(function () { alert("error"); })
           .always(function () { $(".progress").hide(); });

        }
        function LoadBlobs() {
            $.ajax({
                url: "/api/BlobList",
                context: document.body
            }).done(function (data) {
                BindGrid(data);
            });
        }
        function BindGrid(data) {
            $("#grid").remove('.lines');
            $(data).each(function (x, item) {
                var tr = $("<tr class='lines'/>");
                tr.append($("<td/>").html(item.Name));
                if (EndsWith(item.Uri, ".png") || 
                    EndsWith(item.Uri, ".jpg") || 
                    EndsWith(item.Uri, ".gif")) {
                    tr.append($("<td/>").append($('<img class="thumb1" />').attr('src', item.Uri)));
                }
                else {
                    tr.append($("<td/>").append($('<p>No Image</p>')));
                }
                var openLink = $("<a href='" + item.Uri + "' target='_blank'>" + item.Uri + "</a>");
                var deleteCheck = $('<input type="checkbox" class="select-single" data-url="' + item.Uri + '" />');
                tr.append($("<td/>").append(openLink));
                tr.append($("<td/>").append(deleteCheck));
                $("#grid").append(tr);
            });
        }
        function StartsWith(str, prefix) {
            var line = str.toLowerCase();
            var mtc = prefix.toLowerCase();
            if (line.match("^" + mtc)) {
                return true;
            }
        }
        function EndsWith(str, suffix) {
            var line = str.toLowerCase();
            var mtc = suffix.toLowerCase();
            if (line.match(mtc + "$")) {
                return true;
            }
        }
    </script>
}